<template>
  <div class="weblog">
    <div class="header"></div>
    <div class="container">
      <!-- 内容区域 -->
      <div class="list">
        <ArticleArea v-for="item in weblogs" :key="item" :info="item"></ArticleArea>
      </div>
    </div>

  </div>
</template>

<script setup>
  import { computed } from "vue"
  import { useStore } from "vuex"
  import ArticleArea from "../../components/article-area/index.vue"
  // 页面数据
  const store = useStore()
  store.dispatch("weblog/getWeblogsAction")
  const weblogs = computed(() => store.state.weblog.weblogs)
</script>

<style scoped>
.weblog {
  padding-top: 40px;
  padding-bottom: 5px;
  background-color: #aaa;
}

.header {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(102, 102, 102, 0.5);
  position: fixed;
  top: 0;
}

</style>